Datapoint

Overview

A data point or tuple represents a single item in a data model, defined by a specific selection from each and every attribute or hierarchy in that model and a value or measure. Every data point or cell in the result set is generated in the query based on the measure and columns selections made in the drop zones. In Custom Visuals, data points are the same but are structurally a composite of multiple values used to show different graphical capabilities (like the text value, color value, size value etc.). As such, each data point may in fact be multiple logical data points (made up of multiple measures with the same coordinates).

  • From version: 2020.20

Properties

coordinates

coordinates: Element[]

This array returns all the hierarchical member elements that were used in defining this datapoint and generating its values. It does not include the measure. 

dataPoint.coordinates.forEach(e => console.log("cordinate :" + e.caption));

isSelected

isSelected: boolean

Returns true if this datapoint is currently in a selected state. This can be used in the UI to highlight selected and unselected elements. 

Const isDatapointSelected = datapoint.isSelected;

numerics

numerics: Numerics

The numeric object contains all the different numeric values that can be used to draw the custom visual for the given datapoint. NumericValues represent all the different values of the measure chips used in the drop zones. 

const datapoint = cvApi2.resultSet.data.getCurrentTrellisData().datapoints[0];

console.log("current datapoint's numeric value is : " + datapoint.numerics.value.rawValue);

Methods

hideTooltip

hideTooltip ( event : MouseEvent<any, MouseEvent>): void

Hide the tooltip for the current datapoint. Typically used on when the mouse leaves a datapoint. 

const datapoint = cvApi2.resultSet.data.getCurrentTrellisData().datapoints[0].Coordinates[0];

svgElement
.append("path")
.on("mouseover", function () { datapoint.showTooltip(d3.selection.event); })
.on("mouseout", function () { datapoint.hideTooltip(); });

Parameters

  • event:MouseEvent<any, MouseEvent>

Returns void

select

select (): void

Select the current datapoint. May be used to respond to a user's interaction with the visual. 

datapoint.select();

Returns void

showContextMenu

showContextMenu ( event : MouseEvent<any, MouseEvent>): void

Show the 'data point' context menu for the selected datapoint. Provides a method to trigger the data point context menu from Pyramid. Showing the context menu gives the user more options and interactions between the visual and the data. 

const datapoint = cvApi2.resultSet.data.getCurrentTrellisData().datapoints[0];

svgElement
.append("path")
.on("contextmenu", function () { datapoint.showContextMenu(d3.selection.event); });

Parameters

  • event:MouseEvent<any, MouseEvent>

    DOM mouse event object for the context menu to generate from.

Returns void

showTooltip

showTooltip ( event : MouseEvent<any, MouseEvent>): void

Shows the tooltip for the current datapoint. Typically used when the mouse hovers over a datapoint in the visual. 

const datapoint = cvApi2.resultSet.data.getCurrentTrellisData().datapoints[0];

svgElement
.append("path")
.on("mouseover", function () { datapoint.showTooltip(d3.selection.event); });

Parameters

  • event:MouseEvent<any, MouseEvent>

    DOM mouse event object for the tooltip to generate from.

Returns void